<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/' }">用户管理临时页面</el-breadcrumb-item>
      <el-breadcrumb-item>角色权限绑定</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>

    <!-- 角色的列表 -->
    <el-row :gutter="10">
      <!--    角色列表操作按钮    -->
      <el-col :span="10" >
        <el-card class="box-card" style="width: 100%">
          <div class="grid-content bg-purple">所有班级
          </div><br>
          <!--  角色列表-->
          <template>
            <el-table :data="roleData"
                      highlight-current-row
                      @current-change="loadPermissionList"
                      style="width: 100%" size="small">
              <el-table-column type="index" label="序号" align="center"></el-table-column>
              <el-table-column prop="roleName" label="角色" align="center"></el-table-column>
            </el-table>
          </template>
        </el-card>
      </el-col>

      <el-col :span="14">
        <el-card class="box-card" style="width: 100%">
          <div class="grid-content bg-purple-light">角色权限学员
            <div style="float: right ">
              <el-button type="primary" icon="el-icon-plus" circle size="mini"
                         @click="openAddNewPermission"></el-button>
            </div>
          </div><br>
          <!--  分组列表-->
          <template>
            <el-table :data="permissionData"
                      style="width: 100%" size="small">
              <el-table-column type="index" label="序号" align="center"></el-table-column>
              <el-table-column prop="permissionName" label="权限" align="center"></el-table-column>
              <el-table-column prop="value" label="值" align="center"></el-table-column>
            </el-table>
          </template>
        </el-card>
      </el-col>

    </el-row>

    <!-- 弹出添加权限的对话框 -->
    <el-dialog title="添加权限" :visible.sync="addNewPermission">
      <el-form :model="permissionForm">
        <el-form-item label="权限名称" >
          <el-input v-model="permissionForm.permissionName"></el-input>
        </el-form-item>
        <el-form-item label="权限名称" >
          <el-input v-model="permissionForm.value"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addNewPermission = false">取 消</el-button>
        <el-button type="primary" @click="permissionAddNew()">添 加</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      roleData: '',
      lightRole: false,
      highlightRole: '',
      permissionData: '',
      addNewPermission: false,
      permissionStandardForm: {
        permissionName: '',
        value: ''
      },
      permissionForm: {
        permissionName: '',
        value: ''
      }
    }
  },
  methods: {
    loadRoleList(){
      let url = 'http://localhost:9878/roles';
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if ( responseBody.state != 2000){
          this.$message.error('角色列表加载失败，请稍后再试！！')
        } else {
          this.roleData = responseBody.data;
          this.highlightClass = null;
        }
      });
      this.highlightClass = {};
      this.lightRole = false;
    },
    loadPermissionList(role){
      this.highlightRole=role;
      this.lightRole = true;
      let url = 'http://localhost:9878/permissions/'+role.id+'/list';
      console.log(role);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .get(url).then((response) => {
        let responseBody = response.data;
        if ( responseBody.state != 2000){
          this.$message.error('班级列表加载失败，请稍后再试！！')
        } else {
          this.permissionData = responseBody.data;
        }
      });
    },
    openAddNewPermission(){
      if (!this.lightRole) {
        this.$message.error('请先选择需要添加小组的班级！');
      } else {
        this.addNewPermission = true;
      }
    },
    permissionAddNew(){
      let url = 'http://localhost:9878/permissions/'+this.highlightRole.id+'/add-new'
      let formData = this.qs.stringify(this.permissionForm, {arrayFormat: 'repeat'});
      console.log('formData = ' + formData);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('jwt')}})
          .post(url, formData).then((response) => {
        let responseBody = response.data;
        if (responseBody.state != 2000) {
          this.$message.error(responseBody.message)
        } else {
          this.$message({
            message: '添加权限成功！',
            type: 'success'
          });
        }
      });
      this.addNewPermission = false;
      this.permissionForm = this.permissionStandardForm;
      this.loadPermissionList(this.highlightRole);
    },
  },
  mounted() {
    this.loadRoleList();
  }
}
</script>

<style scoped>
.box-card {
  width: 480px;
  height: 750px;
}
</style>